<template>
    <div>
        <el-card shadow="hover">
            <!--1. 查询条件-->
            <el-form :inline="true" :model="studSearch" class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="studSearch.sname" size="medium" placeholder="学生姓名"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="studSearch.addr" size="medium" placeholder="学生住址"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="studSearch.cid" size="medium">
                        <el-option label="所有班级" value="0"></el-option>
                        <el-option :label="c.cname" :value="c.cid" v-for="c in classes" :key="c.cid"></el-option>
                    </el-select>
                </el-form-item>
                <el-button type="success" plain  size="medium" icon="el-icon-search" @click="search">查询学生</el-button>
                <el-button type="primary" plain  size="medium" icon="el-icon-plus" @click="addStudent">添加学生</el-button>
            </el-form>

            <!--编辑学生对话框-->
            <el-dialog title="添加学生" :visible.sync="dialogFormVisible" align="left" :close-on-click-modal="false">
                {{student}}
                <el-form :model="student">
                    <el-form-item label="学生姓名" :label-width="formLabelWidth">
                        <el-input v-model="student.sname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="学生性别" :label-width="formLabelWidth">
                        <el-radio v-model="student.sex" autocomplete="off" value="男" label="男"></el-radio>
                        <el-radio v-model="student.sex" autocomplete="off" value="女" label="女"></el-radio>
                    </el-form-item>
                    <el-form-item label="学生年龄" :label-width="formLabelWidth">
                        <el-input v-model="student.age" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="学生住址" :label-width="formLabelWidth">
                        <el-input v-model="student.addr" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="所在班级" :label-width="formLabelWidth">
                        <el-select v-model="student.cid" placeholder="请选择所在班级">
                            <el-option :label="c.cname" :value="c.cid" v-for="c in classes" :key="c.cid"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </div>
            </el-dialog>
            <!--2. 数据展示-->
            <el-table
                    :data="students"
                    style="width: 100%">
                <el-table-column
                        label="学号"
                        prop="sid"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="sname"
                        align="center"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="sex"
                        align="center"
                        label="性别">
                </el-table-column>
                <el-table-column
                        prop="age"
                        align="center"
                        label="年龄">
                </el-table-column>
                <el-table-column
                        prop="addr"
                        align="center"
                        label="住址">
                </el-table-column>
                <el-table-column
                        prop="cname"
                        align="center"
                        label="所在班级">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页导航-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[3, 6, 9, 12]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>


    </div>
</template>

<script>
    export default {
        data() {
            return {
                students: [],
                page:1,
                pageSize:3,
                total:100,
                studSearch:{},
                classes:[],
                dialogFormVisible:false,
                formLabelWidth:'120px',
                student:{},


            }
        },
        created() {
            //1. 查询所有的学生
            // this.findAllStudents();
            //2. 分页查询学生
            // this.findByPage()
            //3. 查询所有班级
            this.findClasses()
            //4. 条件查询带分页
            this.search()
        },
        methods: {
            //1. 查询所有的学生
            findAllStudents(){
                this.axios.get("/student/list").then(({data})=>{
                   this.students = data.data.students
                })
            },
            //2. 分页查询学生信息
            findByPage(){
                this.axios.get(`/student/findByPage/${this.page}/${this.pageSize}`).then(({data})=>{
                    console.log("data:",data)
                    //2.1 为当前学生集合赋值
                    this.students = data.data.pr.rows
                    //2.2 为记录数赋值
                    this.total = data.data.pr.total
                })
            },
            //3. 查询所有班级
            findClasses(){
                this.axios.get("/classes/list").then(({data})=>{
                    this.classes = data.data.classes
                })
            },
            //4. 条件查询带分页
            search(){
                this.axios.post(`/student/search/${this.page}/${this.pageSize}`,this.studSearch).then(({data})=>{
                    console.log("data:",data)
                    //2.1 为当前学生集合赋值
                    this.students = data.data.pr.rows
                    //2.2 为记录数赋值
                    this.total = data.data.pr.total
                })
            },
            //5. 添加学生
            addStudent(){
                //5.1 显示对话框
                this.dialogFormVisible = true
            },
            //6. 保存学生 (添加或修改)
            //思考:如何区分添加还是修改? 主要看student.sid是否有值,如果有值就是修改,否则,就是添加
            save(){
                let url = "/student/add"
                if(this.student.sid){
                    url = "/student/update"
                }
                let _this = this
                this.axios.post(url,this.student).then(({data})=>{
                    console.log("data:",data)
                    if(data.code === 20000){
                        this.$message({
                            message: data.message,
                            type: 'success',
                            onClose(){
                                _this.dialogFormVisible = false
                            }
                        });
                    }
                })
            },
            //7. 显示编辑学生界面
            handleEdit(row) {
               this.student = row
               this.dialogFormVisible = true
            },
            //8. 根据学号删除学生
            handleDelete(row) {
                let _this = this
                this.$confirm(`此操作将永久删除[${row.sname}]同学?', '温馨提示`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //8.1 点击了确定按钮,代表此时要删除学生
                    this.axios.get(`/student/delete/${row.sid}`).then(({data})=>{
                        if(data.code === 20000){
                            this.$message({
                                type: 'success',
                                message: data.message,
                                onClose(){  // 当消息框关闭时,自动刷新页面
                                    _this.search()
                                }
                            });
                        }
                    })

                });
            },
            //每页大小改变时触发
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val
                this.search()
            },
            //当前页改变时触发的事件
            handleCurrentChange(val) {
               this.page = val
               this.search()
            }
        }
    }
</script>

<style scoped>
    .el-form{
        text-align: left;
    }
    .el-pagination{
        text-align: right;
        margin-top: 20px;
    }
</style>